<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>京东登录</title>
		<style type="text/css">
			
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.box {
				position: relative;
				width: 500px;
				margin: 30px auto;
				/*background: pink;*/
				border-bottom: 1px solid #ccc;
			}
			
			.box input {
				width: 450px;
				height: 50px;
				outline: none;
				padding-left: 50px;
				border: 0;
			}
			.box img {
				position: absolute;
				top: 50%;
				right: 10px;
				transform: translateY(-50%);
				width: 24px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<label for="password">
				<img src="img/close.png"/>
			</label>
			<input type="password" name="" id="password"/>
		</div>
		
		<script type="text/javascript">
			//获取元素对象
			var img = document.querySelector('img');
			var input = document.querySelector('input');
			
			var flag = 0;
			img.onclick = function() {
				//修改input的type属性
				if(flag == 0) {
					input.type = 'text';
					this.src = 'img/open.png';
					flag = 1
				}else {
					input.type = 'password';
					this.src = 'img/close.png';
					flag = 0;
				}
			}
		</script>
	</body>
</html>
